<template>
  <t-dialog
    :visible="props.visible"
    header="关联至辅助信息"
    body="对话框内容"
    :confirm-on-enter="true"
    :on-close="close"
    :on-confirm="onConfirmAnother"
  >
    <div class="scroll-bos">
      <div class="" v-for="(item, index) in props.list" :key="item.id">
        <div @click="onChange(item.id)" class="items-parent" v-if="item.id !== -1 && index !== 1">
          <div class="item" :class="{ 'item-active': current === item.id }">
            <span class="item-text1">{{ item.name }}</span>
            <span class="item-text2">{{ item.total }}</span>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="from-btm-box">
        <t-button theme="default" variant="outline" @click="close">取消</t-button>
        <t-button @click="onConfirmAnother">确定关联</t-button>
      </div>
    </template>
  </t-dialog>
</template>

<script setup lang="ts">
// @ts-nocheck
import { urls } from '@/utils/request/upload';
import { ref } from 'vue';
import { companyMembers } from '@/api/company/company';
import { MessagePlugin } from 'tdesign-vue-next';
import messageModel from '@/components/messageModel/index.vue';

const props = defineProps({
  visible: {
    type: Boolean,
  },
  list: {
    type: Array,
  },
});
const emit = defineEmits(['close', 'moveClose']);
const listMembers = ref([]);
const radioType = ref(0);
const current = ref(0);
const seach = ref('');

const onChange = (e: any) => {
  current.value = e;
};
const close = (context) => {
  //关闭弹框
  emit('close');
};
const onConfirmAnother = (context) => {
  if (current.value === 0) {
    MessagePlugin.error(`请选择要关联的辅助信息`);
    return;
  }
  emit('moveClose', current.value);
};
</script>

<style lang="less" scoped>
:deep(.t-dialog) {
  width: 418px !important;
}
:deep(.t-dialog__header) {
  height: 60px;
}
:deep(.t-dialog__body) {
  padding: 0 12px;
}
.scroll-bos {
  width: 100%;
  height: 352px;
  overflow: auto;
}
.scroll-bos::-webkit-scrollbar {
  display: none;
}
.items-parent {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
}
.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 36px;
  width: 100%;
  padding: 0 12px;

  border-radius: 4px;
}
.items-parent:hover {
  .item {
    background: #f0f0f0;
  }
  .item-active {
    background: rgba(255, 236, 230, 1);
  }
}
.item-active {
  background: rgba(255, 236, 230, 1);
  .item-text1 {
    color: #e62b17;
  }
}
.item-text1 {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.59);
  line-height: 24px;
}
.item-text2 {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.38);
  line-height: 22px;
}
</style>
